import React, { PureComponent } from 'react';
import { Table } from 'antd';
import styles from './index.less';
// 封装此组件的原因 其实在于集中分页处理选中问题！ 因为如果是在数据不发生变化，分页选中是没问题的，如果每一次表格数据发生变化，那么在处理选中事件的时候，所拿到的选中数据，只是当前页面的数据！
class StandardTable extends PureComponent {
  constructor(props) {
    super(props);
    this.selectRowArr = []; // 所有选中的数据
    this.state = {
      selectedRowKeys: [],
    };
  }

  static getDerivedStateFromProps(nextProps) {
    // clean state
    if (nextProps.selectedRows.length === 0) {
      return {
        selectedRowKeys: [],
      };
    }
    return {
      selectedRowKeys: nextProps.selectedRowKeys || [],
    };
  }

  componentDidUpdate() {
    const { selectedRowKeys } = this.state;
    if (!selectedRowKeys.length) {
      this.selectRowArr = [];
    }
  }

  /**
   * 当每一行选中项变化的时候所触发的方法
   * @param {Array} currentSelectedRowKeys 当前选中项的key
   * @param {Array} currentSelectedRows 当前选中项
   */
  handleRowSelectChange = (currentSelectedRowKeys, currentSelectedRows) => {
    const {
      onSelectRow,
      data: { pagination },
    } = this.props;
    // current 是当前页签 第几页
    const { current } = pagination;
    let selectedRows = [];
    let selectedRowKeys = [];
    // 因为当每一次切换页签 上级传来的table数据都会发生变化，进而导致此时table所选中的Rows RowKeys全部清空、也就是说每一次切换页签后currentSelectedRowKeys, currentSelectedRows 这两个参数都会清空、不会保存上一页所选中的数据、所以我们把每一个页签内所选中的数据存储到对应页签对象内 最后在导出的时候把所有页签内的数据concat起来、就是当前所有选中的数据
    // [
    // { 这里相当于第一页的数据
    //   selectedRowKeys:["","","",""],
    //   selectedRows:[{},{},{},{}]
    // },
    // { 这里相当于第二页的数据
    //   selectedRowKeys:["","","",""],
    //   selectedRows:[{},{},{},{}]
    // },
    // ]
    // 这里 current-1 是因为，在数组中，是从第0项开始！ 而current表示页签初始值是1  其实就是防止数组的第一项为empty
    this.selectRowArr[current - 1] = {
      selectedRowKeys: currentSelectedRowKeys,
      selectedRows: currentSelectedRows,
    };
    // 最后只要把所有页面的数据合并起来，就是所有页面选中的数据 然后导出
    this.selectRowArr.forEach(item => {
      selectedRows = selectedRows.concat(item.selectedRows);
      selectedRowKeys = selectedRowKeys.concat(item.selectedRowKeys);
    });
    if (onSelectRow) {
      onSelectRow(selectedRows, selectedRowKeys);
    }
    this.setState({ selectedRowKeys });
  };

  handleTableChange = (pagination, filters, sorter) => {
    const { onChange } = this.props;
    if (onChange) {
      onChange(pagination, filters, sorter);
    }
  };

  cleanSelectedKeys = () => {
    this.handleRowSelectChange([], []);
  };

  render() {
    const { selectedRowKeys } = this.state;
    const { data = {}, rowKey, ...rest } = this.props;
    const { list = [], pagination } = data;
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      showTotal: total => {
        const totalPage = total < pagination.pageSize ? 1 : Math.ceil(total / pagination.pageSize);
        return `共 ${total} 条记录 第 ${pagination.current} / ${totalPage}页`;
      },
      ...pagination,
    };

    const rowSelection = {
      selectedRowKeys,
      onChange: this.handleRowSelectChange,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <div className={styles.standardTable}>
        <Table
          rowKey={rowKey || 'key'}
          rowSelection={rowSelection}
          dataSource={list}
          pagination={paginationProps}
          onChange={this.handleTableChange}
          {...rest}
        />
      </div>
    );
  }
}

export default StandardTable;
